<template>
	<div class="content">
		<heads :current='1'></heads>
		<div class="banner">
			<a href="#">
				<img :src="headImage" />
			</a>
		</div>
		<div class="main_team_box">
			<div class="m">
				<div class="tong_title">
					<span>{{ $t('products.halfDayTrip.title') }}</span>
				</div>
				<div class="font_itinerary">
					<div class="tong_titles">
						<p>{{ $t('products.halfDayTrip.itinerary') }}</p>
					</div>
					<div class="box">
						<div class="fl">
							<span>{{ $t('products.halfDayTrip.description1') }}</span>

							<span>{{ $t('products.halfDayTrip.description2') }}</span>

							<span>{{ $t('products.halfDayTrip.description3') }}</span>

							<span>{{ $t('products.halfDayTrip.description4') }}</span>
						</div>
						<div class="fr">
							<div>
								<p>{{ $t('products.halfDayTrip.suitableFor') }}</p>
								<span>{{ $t('products.halfDayTrip.suitableDescription') }}</span>
							</div>
							<div>
								<p>{{ $t('products.halfDayTrip.cancellationPolicy') }}</p>
								<span>{{ $t('products.halfDayTrip.cancellationDescription') }}</span>
							</div>
							<div>
								<p>{{ $t('products.halfDayTrip.diverInfo') }}</p>
								<span v-html="$t('products.halfDayTrip.diverDescription')"></span>
							</div>
						</div>
					</div>
				</div>
				<div class="main_photo_box">
					<div class="slide">
						<div class="swiper mySwiper">
							<div class="swiper-wrapper">
								<div class="swiper-slide" v-for="item in bannerList.list" :key="item">
                  <div style="width: 100%">
                    <el-image :preview-src-list="bannerList.imageList" :src="item[0]" style="width: 100%"/>
                  </div>
                  <ul>
                    <li v-for="subItem in item.slice(1,4)" :key="item">
                      <el-image :src="subItem" :preview-src-list="bannerList.imageList" style="height: 100%"/>
                    </li>
                  </ul>
								</div>
							</div>
						</div>
						<div class="btn prev" @click="prev"><img src="@/assets/images/prev.png" /></div>
						<div class="btn next" @click="next"><img src="@/assets/images/next.png" /></div>
					</div>
				</div>
				<div class="main_price_box">
					<div class="tong_titles">
						<p>{{ $t('products.price') }}</p>
						<span>{{ $t('products.priceDescription') }}</span>
					</div>
					<ul class="ul1">
						<li>
							<p>{{ $t('products.adultPrice') }}</p>
							<span>$299</span>
						</li>
						<li>
							<p>{{ $t('products.childrenPrice') }}</p>
							<span>$150</span>
						</li>
						<li>
							<p>{{ $t('products.childrenUnder6') }}</p>
              <span>{{ $t('products.free')}}</span>
						</li>
						<li>
							<p>{{ $t('products.groupSize') }}</p>
							<span>3-12 {{ $t('products.person') }}</span>
						</li>
					</ul>
				</div>
				<div class="public_button">
          <a href="javascript:" @click="toOrder" target="_blank">{{ $t('products.bookNow') }}</a>
				</div>
			</div>
		</div>
		<foot></foot>
	</div>
</template>

<script>
import { http } from '@/api/api'
	import swiper from "swiper";
	export default {
		name: '',
		data() {
			return {
				mySwiper: null
			}
		},
    computed: {
      banner() {
        return this.$store.state.banners || {}
      },
      // 产品头部-Half-Day Hook, Dive, and Grill
      headImage() {
        return (this.banner['产品头部-Half-Day Hook, Dive, and Grill'] || { url: '' }).url
      },
      // 产品轮播-Half-Day Hook, Dive, and Grill
      bannerList() {
        let list = (this.banner['产品轮播-Half-Day Hook, Dive, and Grill'] || {url: '' }).url.split(',')
        let imageList = [
            ...list
        ]
        let _list = []
        while (list.length > 0) {
          _list.push(list.splice(0,4))
        }
        return {
          imageList,
          list: _list
        }
      },
      // 产品其他-Half-Day Hook, Dive, and Grill
      otherList() {
        return (this.banner['产品其他-Half-Day Hook, Dive, and Grill'] || {url: '' }).url.split(',')
      }
    },
		mounted() {
			setTimeout(() => {
        this.initSwiper();
      },1000)
		},
		methods: {
			initSwiper() {
				this.mySwiper = new Swiper(".mySwiper", {
					//设置轮播的循环方式
          loop: false,
          //设置自动播放间隔时间
          autoplay: 0,
          // 轮播效果,默认为平滑轮播
          effect: "slide",
          pagination: ".swiper-pagination",
          autoplayDisableOnInteraction: true,
				});
			},
			prev(){
				this.mySwiper.slidePrev()
			},
			next(){
				this.mySwiper.slideNext()
			},
      toOrder() {
        http.ship.detailByCode({ code: 'Half_Day'}).then(res => {
          console.log(res)
          if (!res.data) {
            return
          }
          this.$router.push({
            path: '/order',
            query: {
              id: res.data.id
            }
          })
        })
      }

		}
	}
</script>

<style>

</style>
